<template>
	<view>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">所属商品</view>
				<picker @change="PickerChange" :value="index" :range="picker" :range-key="'goodsName'">
					<view class="picker">
						{{index>-1?picker[index].goodsName:'请选择所属商品'}}
					</view>
				</picker>
			</view>
			
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					商品图片
				</view>
				<view class="action">
					{{imgList.length}}/4
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
			
			<view class="cu-form-group align-start">
				<view class="title">案例描述</view>
				<textarea maxlength="-1" v-model="descs" placeholder="请输入案例描述"></textarea>
			</view>
		</form>
		
		<view class="padding flex flex-direction">
			<button style="background-color: #38628E;border-radius: 30px;height: 40px;line-height: 40px;" class="send-btn" type="primary"
				@click="submitCmt">添&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;加</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				picker: [],
				imgList: [],
				goodsId: "",
				realImg: [],
				descs: "",
				id: "",
				uploadUrl: "https://www.yigezhinengkeji.club/app/common/upload",
				uploadRoot: "https://www.yigezhinengkeji.club",
			};
		},
		onLoad(option) {
			this.getGoodsList();
			let id = option.id;
			if(id != null && id != undefined && "" != id){
				this.id = id;
				this.geCasesById(id);
			}
		},
		methods: {
			submitCmt() {
				if (this.disabled || this.loading) {
					return
				}
				if (this.descs == '' || this.descs == null) {
					this.fetch.toast("案例描述不能为空")
					return
				}
				this.disabled = true
				this.loading = true;
				let urlType = "";
				if(this.id != null && this.id != undefined && "" != this.id){
					urlType = "PUT";
				}else{
					urlType = "POST";
				}
				this.fetch.request("/case", urlType, {
					id:this.id,
					goodsId: this.goodsId,
					imgs:this.realImg.join(","),
					descs:this.descs
				}, false, true, false, this)
				.then((res) => {
					console.log("res",res);
					this.disabled = false
					this.loading = false
					this.fetch.toast(res.msg, "", res.code == 0)
					uni.navigateBack();
					uni.redirectTo({
						url:"/pages/home/home"
					})
				}).catch(() => {
					this.disabled = false
					this.loading = false
				})
			},
			geCasesById(id){
				this.fetch.request("/case/"+id, "get", {
					id:id
				},
				 false, true, false).then(res => {
					let data = res.data;
					this.goodsId = data.goodsId;
					this.descs = data.descs;
					let imgs = data.imgs;
					if(null != imgs && undefined != imgs && "" != imgs){
						let urls = imgs.split(",");
						this.imgList = urls;
						this.realImg = urls;
					}
					
					let goodsId = data.goodsId;
					console.log("this.picker",this.picker);
					if(null != goodsId && undefined != goodsId && "" != goodsId){
						for(let i = 0; i < this.picker.length; i++){
							if(this.picker[i].id == goodsId){
								this.index = i;
							}
						}
					}
				}).catch(error => {
					console.log(error)
				})
			},
			PickerChange(e) {
				this.goodsId = this.picker[e.detail.value].id
			},
			getGoodsList(){
				this.fetch.request('/goods/listAll', 'post', {
					shopId: uni.getStorageSync("shopId")
				},
				 false, true, false).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.picker = res.data;
					}else{
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function (res) {
							}
						});
					}
				}).catch(error => {
					console.log(error)
				})
			},
			ChooseImage() {
				let that = this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						 //循环遍历传入，达到一次性上传多张的效果
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								// 后端api接口
								url: this.uploadUrl, 
								// uni.chooseImage函数调用后获取的本地文件路劲
								filePath: res.tempFilePaths[i], 
								name: 'file', //后端通过'file'获取上传的文件对象
								//这里是请求头需要携带的token数据
								success: (uploadFileRes) => {
									let imgRes = JSON.parse(uploadFileRes.data);
									that.realImg.push(this.uploadRoot +imgRes.fileName);
								}
							})
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张照片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							this.realImg.splice(e.currentTarget.dataset.index, 1)
							console.log(this.realImg)
						}
					}
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #F9F9F9;
	}
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.send-btn {
		width: 100%;
		margin-top: 15px;
		border-radius: 6rpx;
	}
</style>
